<template>
	<view class="information">
			<!-- 姓名 -->
			<view class="infor-item flex justify-start align-center">
				<view class="item1">
					姓名：
				</view>
				<view class="item2">
					<input type="text" class="item-input" placeholder="请输入">
				</view>
				<!-- <image class="img-right" src="/static/store/jiantouyou.png"></image> -->
			</view>
			
			
			<view class="infor-item flex justify-start align-center">
				<view class="item1">
					手机：
				</view>
				<view class="item2">
					<input type="text" class="item-input" placeholder="请输入">
				</view>
				<!-- <image class="img-right" src="/static/store/jiantouyou.png"></image> -->
			</view>


		
			<view class="infor-item flex justify-start align-center">
				<view class="item1">
					所在地：
				</view>
				<view class="item2">
					<picker style="width:100%;height:88rpx;" mode="region" @change="bindRegionChange">
						<input type="text" disabled class="item-input" placeholder="请输入">
					</picker>
				</view>
				<image class="img-right" src="/static/store/jiantouyou.png"></image>
			</view> 
			
			<view class="infor-item flex justify-start align-center">
				<view class="item1">
					地址：
				</view>
				<view class="item2">
					<input type="text" class="item-input" placeholder="请输入">
				</view>
				<!-- <image class="img-right" src="/static/store/jiantouyou.png"></image> -->
			</view>



			<!-- 新增收货地址 -->
			<view class="loginOut flex align-center justify-center">
				<view class="btn">
					新增收货地址
				</view>

			</view>



		</view>





	</view>
</template>

<script>
	export default {
		data() {
			return {


			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		mounted() {

		},
		methods: {
			// 出生日期
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			// 地址选择
			bindRegionChange: function(e) {
				this.date = e.target.value
			},
			// 选择性别
			chooseSex() {

				uni.showActionSheet({
					itemList: ['男', '女'],
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});


			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},


		}
	}
</script>

<style lang="scss">
	// 用户信息
	.information {
		width: 750rpx;
		padding: 0 32rpx;

		

		.infor-item {
			width: 100%;
			height: 88rpx;
			border-bottom: 2rpx solid #EEEEEE;
			
			.item-code{
				.code{
					display: inline-block;
					width:168rpx;
					height:60rpx;
					line-height: 60rpx;
					border-radius: 36rpx;
					text-align: center;
					background: #d4237a;
					color:white;
					font-size: 26rpx;
				}
			}

			.item1 {
				width:188rpx;
				height:88rpx;
				line-height: 88rpx;
				text-align: justify;
				padding-left:16rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}

			.item2 {
				flex: 3;

				.item-input {
					width: 100%;
					height: 88rpx;
				}
			}

			.img-right {
				width: 24rpx;
				height: 40rpx;
			}

		}

		// 退出登录
		.loginOut {
			width: 100%;
			height: 88rpx;
			margin-top: 300rpx;

			.btn {
				width: 660rpx;
				height: 75rpx;
				line-height: 75rpx;
				background: #d4237a;
				border-radius: 45rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}


	}
</style>
